<template>
	<div class="wrapper">
		<u-navbar class="navbar" :is-back="false" :is-fixed="true" :background="background" height="96" width="100%">
			<div class="navbar-solt-div">
				<div class="title">鸭子飞了</div>
				<div class="search">
					<!-- <div class="search-img">
						<u-avatar size="93"></u-avatar>
					</div> -->
					<search style="width: 100%" :res="serchOptions" />
				</div>
			</div>
		</u-navbar>

		<carousel :res="bannerOptions" />

		<div class="noticediv" @click="gotoGonggaoDetail">
			<span class="toutiao">头条</span>
			<div class="remen">热门</div>
			<div class="noticebardiv">
				<u-notice-bar mode="horizontal" :list="list" :volume-icon="false" type="none" :is-circular="false">
				</u-notice-bar>
			</div>
		</div>


		<div class="morediv">
			<div v-for="(item, index) in moreList" :key="index" class="morediv_item" @click="goCategory(item)">
				<image :src="item.image" class="morediv_item_img"></image>
				<span class="morediv_item_title">{{item.name}}</span>
			</div>
		</div>

		<div class="new">
			<span class="new_title">最新上架</span>
			<span class="new_new">new</span>
			<span class="new_more" @click="handleGoSearch">查看更多 ></span>
		</div>


		<div class="proListdiv">
			<div class="proItems" v-for="items in proList" :key="items.id" @click="goTodetail(items.id)">
				<div class="proItems_img">
					<image :src="items.image" mode="" style="width: 100%;height: 100%; border-radius: 15rpx 15rpx 0 0">
					</image>
				</div>
				<div class="proItems_name">{{items.name}}</div>
				<div class="proItems_price"><span style="font-size: 20rpx;">¥</span> {{items.price}}

					<span class="proItems_savl">月销: {{items.sellNum || 0}}</span>
				</div>


				<!-- <div class="proItems_car" @click.stop="showProductguige(items)">
					<image src="/static/newImg/car.png" style="width: 100%;height: 100%;"></image>
				</div> -->
			</div>
		</div>
		<div v-for="(item, index) in pageData.list" :key="index">


		</div>
		<fetchCoupon ref='coupon' />
		<u-no-network @retry="init" @isConnected="isConnected"></u-no-network>

		<u-popup v-model="carshow" mode="bottom" :closeable="true" :mask-close-able="false">
			<view class="carshowview">
				<view class="goods-header">
					<view class="goods-img">
						<u-image width="178rpx" class="uimage" height="178rpx" :src="currentProduct.image"></u-image>
					</view>

					<view class="goods-price">
						<span class="lsj">零售价 </span>
						<span class="price">{{currentProduct.price}}</span>
					</view>

					<view class="goods-kc">
						<span>库存1531件</span>
					</view>

					<view class="goods-spgg"> 请选择 商品规格 </view>
				</view>

				<view class="goods-sku">
					<view class="skutitle">商品规格</view>

					<view class="skulist">
						<view class="skulistitem" v-for="item in skulist" :key="item.id"
							:class="item.id == currentskuid ? 'skulight' : ''" @click="handleskuclick(item)">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="numbox">
					<view class="numboxtitle">购买数量</view>
					<uni-number-box class="uNumber" :min="0" :max="999" v-model="num"></uni-number-box>
				</view>

				<view class="btns">
					<view class="box-btn-card" @click="addToCartOrBuy('cart')">加入购物车</view>
					<view class="box-btn-buy" @click="addToCartOrBuy('buy')">立即购买</view>
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
	// 引用组件
	import tpl_banner from "@/pages/tabbar/home/template/tpl_banner"; //导航栏模块
	import tpl_title from "@/pages/tabbar/home/template/tpl_title"; //标题栏模块
	import tpl_left_one_right_two from "@/pages/tabbar/home/template/tpl_left_one_right_two"; //左一右二模块
	import tpl_left_two_right_one from "@/pages/tabbar/home/template/tpl_left_two_right_one"; //左二右一模块
	import tpl_top_one_bottom_two from "@/pages/tabbar/home/template/tpl_top_one_bottom_two"; //上一下二模块
	import tpl_top_two_bottom_one from "@/pages/tabbar/home/template/tpl_top_two_bottom_one"; //上二下一模块
	import tpl_flex_one from "@/pages/tabbar/home/template/tpl_flex_one"; //单行图片模块
	import tpl_flex_two from "@/pages/tabbar/home/template/tpl_flex_two"; //两张横图模块
	import tpl_flex_three from "@/pages/tabbar/home/template/tpl_flex_three"; //三列单行图片模块
	import tpl_flex_five from "@/pages/tabbar/home/template/tpl_flex_five"; //五列单行图片模块
	import tpl_flex_four from "@/pages/tabbar/home/template/tpl_flex_four"; //四列单行图片模块
	import tpl_text_picture from "@/pages/tabbar/home/template/tpl_text_picture"; //文字图片模板
	import tpl_menu from "@/pages/tabbar/home/template/tpl_menu"; //五列菜单模块
	import tpl_search from "@/pages/tabbar/home/template/tpl_search"; //搜索栏
	import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
	import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
	import uniNumberBox from "@/components/uni-number-box";
	// 结束引用组件
	import {
		getIndexBanner,
		getIndexGonggao,
		getIndexType,
		getIndexProduct
	} from "@/api/home"; //获取楼层装修接口
	import {
		productSpecifications
	} from '@/api/goods.js'
	import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
	import config from "@/config/config";

	import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模块
	import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
	import storage from "@/utils/storage.js";
	import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
	// import {receiveCoupons} from "@/api/members"

	export default {
		data() {
			return {
				serchOptions: {
					list: [{
						title: '精品零食抢购'
					}]
				},
				bannerOptions: [

				],
				background: {
					backgroundColor: 'rgb(25, 189, 93)',
				},
				list: [

				],
				currentProduct: {},
				carshow: false,
				params: {
					page: 1,
					limit: 10,
					type: 1,
					keyword: ""
				},
				config,
				storage,
				showCp: true,
				pageData: "", //楼层页面数据
				isIos: "",
				enableLoad: false, //触底加载 针对于商品模块
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				moreList: [],
				proList: [],
				skulist: [],
				currentskuid: 1,
				num: 1,
			};
		},
		components: {
			carousel: tpl_banner,
			titleLayout: tpl_title,
			leftOneRightTwo: tpl_left_one_right_two,
			leftTwoRightOne: tpl_left_two_right_one,
			topOneBottomTwo: tpl_top_one_bottom_two,
			topTwoBottomOne: tpl_top_two_bottom_one,
			flexThree: tpl_flex_three,
			flexFive: tpl_flex_five,
			flexFour: tpl_flex_four,
			flexTwo: tpl_flex_two,
			textPicture: tpl_text_picture,
			menuLayout: tpl_menu,
			search: tpl_search,
			flexOne: tpl_flex_one,
			goods: tpl_goods,
			group: tpl_group,
			notice: tpl_notice,
			promotions: tpl_promotions,
			fetchCoupon,
			uniNumberBox
		},
		mounted() {

			uni.$on('onReachBottom', () => {
				this.params.page = this.params.page + 1;
				this.queryProduct();
			})
			this.init();
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true
			});
			// #endif

		},
		methods: {
			
			goTodetail(items){
				uni.navigateTo({
					url: `/pages/product/goods?id=${items}`,
				});
			},

			showProductguige(product) {

				uni.showLoading({
					title: "加载中",
				});
				this.currentProduct = {
					...product
				};

				productSpecifications({
					id: product.id
				}).then(res => {

					uni.hideLoading();
					this.skulist = res.data || []
					this.carshow = true;
				})



			},

			handleskuclick({
				id
			}) {
				this.currentskuid = id;
			},

			addToCartOrBuy(type) {
				if (type == "cart") {
					//调用接口条件到购物车
					// if (res.data.code == 200) {
					//     uni.showToast({
					//       title: "商品已添加到购物车",
					//       icon: "none",
					//     });
					//    this.carshow = false
					//     this.closeMask();
					//   }
				}
				if (type == "buy") {
					// 判断是否有地址

					uni.navigateTo({
						url: `/pages/order/fillorder?way=BUY_NOW`,
					});
				}
			},

			goCategory(item) {
				if (item.id) {
					uni.reLaunch({
						url: `/pages/tabbar/category/category?id=${item.id}`,
					});
				} else {
					uni.switchTab({
						url: `/pages/tabbar/category/category`,
					});
				}
			},
			handleGoSearch() {
				// 传递参数 按类别查询
				uni.navigateTo({
					url: `/pages/navigation/search/searchPage?category=${1}`,
				});
			},

			gotoGonggaoDetail() {
				uni.navigateTo({
					url: `/pages/tabbar/user/questionDetail?id=${id}`,
				});
			},
			fetchCoupon() {
				// this.$refs.coupon.firstGetAuto();
			},
			/**
			 * 实例化首页数据楼层
			 */
			init() {
				this.pageData = "";
				getIndexBanner().then(res => {
					let arr = [];
					if (res.data.length > 0) {
						res.data.forEach(i => {
							arr.push({
								image: i
							})
						})
					}
					this.bannerOptions = arr
				});
				getIndexGonggao().then(res => {

					let arr = [];
					res.data.forEach(item => {
						arr.push(item.content)
					})
					this.list = arr;

				});
				getIndexType().then(res => {
					let arr = [];
					if (res.data.length > 4) {
						arr = res.data.slice(0, 4);

					} else {
						arr = res.data
					}

					arr.push({
						image: '/static/newImg/rou.png',
						name: '查看更多'
					})

					this.moreList = arr
				});
				this.queryProduct();
			},
			// 是否有网络链接
			isConnected(val) {
				val ? this.init() : ''
			},

			/**
			 * TODO 扫码功能后续还会后续增加
			 * 应该实现的功能目前计划有：
			 * 扫描商品跳转商品页面
			 * 扫描活动跳转活动页面
			 * 扫描二维码登录
			 * 扫描其他站信息 弹出提示，返回首页。
			 */
			scanCode() {
				uni.scanCode({
					success: function(res) {
						let path = encodeURIComponent(res.result);



						if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
							console.log(path)
							//app扫码登录
							uni.navigateTo({
								url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
							});
							return;
						}


						// WX_CODE 为小程序码
						if (res.scanType == "WX_CODE") {
							console.log(res);
							uni.navigateTo({
								url: `/${res.path}`,
							});
						} else {
							config.scanAuthNavigation.forEach((src) => {
								if (res.result.indexOf(src) != -1) {
									uni.navigateTo({
										url: `/${res.result.substring(src.length)}`,
									});
								} else {
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/tabbar/home/web-view?src=" +
												path,
										});
									}, 100);
								}
							});
						}
					},
				});
			},

			/**
			 * 提示获取权限
			 */
			tipsGetSettings() {
				uni.showModal({
					title: "提示",
					content: "您已经关闭相机权限,去设置",
					success: function(res) {
						if (res.confirm) {
							if (this.isIos) {
								plus.runtime.openURL("app-settings:");
							} else {
								permission.gotoAppPermissionSetting();
							}
						}
					},
				});
			},

			/**
			 * 唤醒客户端扫码
			 * 没权限去申请权限，有权限获取扫码功能
			 */

			async scan() {
				// #ifdef APP-PLUS
				this.isIos = plus.os.name == "iOS";
				// 判断是否是Ios
				if (this.isIos) {
					const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
					if (iosFirstCamera !== "false") {
						uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
						this.scanCode();
					} else {
						if (permission.judgeIosPermission("camera")) {
							this.scanCode();
						} else {
							// 没有权限提醒是否去申请权限
							this.tipsGetSettings();
						}
					}
				} else {
					/**
					 * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
					 * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
					 */
					this.scanCode();
				}

				// #endif

				// #ifdef MP-WEIXIN
				this.scanCode();
				// #endif
			},

			queryProduct() {
				uni.showLoading({
					title: "加载中",
				});
				getIndexProduct({
					...this.params
				}).then(res => {
					uni.hideLoading()
					if (res.data.list.length > 0) {
						this.proList.push(...res.data.list)

					} else {

						this.params.page = this.params.page - 1

					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.wrapper {
		background-color: rgb(238, 238, 238);
		min-height: 100vh;
	}

	.navbar-solt-div {
		width: 100%;
		height: 200rpx;
		position: relative;
	}

	.search {
		width: 100%;
		height: 92rpx;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.title {
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 36rpx;
		position: absolute;
		top: 44rpx;
	}

	.search-img {
		width: 145rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.serach-div {
		flex: 1;
		padding-right: 63rpx;
	}

	.noticediv {
		width: 100%;
		height: 105rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}

	.toutiao {
		height: 24rpx;
		font-style: italic;
		font-weight: 400;
		font-size: 32rpx;
		color: #DF253F;
		padding: 0 34rpx;
		font-family: YouSheBiaoTiHei;
		line-height: 24rpx;
	}

	.remen {
		width: 79rpx;
		height: 42rpx;
		text-align: center;
		line-height: 42rpx;
		border-radius: 10rpx;
		border: 1px solid #28C749;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 28rpx;
		color: #28C749;
	}

	.noticebardiv {
		flex: 1;

		height: 100%;
		display: flex;
		align-items: center;
	}

	.u-notice-bar-wrap {
		width: 100% !important;
	}

	.morediv {
		width: 100%;
		height: 228rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;

	}

	.morediv_item {
		height: 150rpx;
		display: flex;
		width: 120rpx;
		justify-content: center;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.morediv_item_img {
		width: 97rpx;
		height: 97rpx;
		border-radius: 50%;

	}

	.morediv_item_title {
		width: 100%;
		height: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		line-height: 30rpx;
		text-align: center;
	}

	.new {
		width: 100%;
		height: 124rpx;
		display: flex;
		align-items: center;
	}

	.new_title {
		height: 31rpx;
		padding-left: 290rpx;
		line-height: 31rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		padding-right: 24rpx;
	}

	.new_new {
		text-align: center;
		width: 70rpx;
		height: 34rpx;
		line-height: 31rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 25rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, rgb(255, 154, 68), rgb(255, 154, 104));
		border-radius: 5rpx;
	}

	.new_more {
		padding-left: 116rpx;
		height: 19rpx;
		line-height: 19rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 18rpx;
		color: #5B5B5B;
	}

	.proListdiv {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;
	}

	.proItems {
		width: 347rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin-left: 22rpx;
		margin-bottom: 22rpx;
		position: relative;
		border-radius: 15rpx;
	}

	.proItems_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 348rpx;

	}

	.proItems_name {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		padding-left: 27rpx;
		padding-right: 27rpx;
		position: absolute;
		top: 367rpx;
		left: 0;
		
		text-overflow: -o-ellipsis-lastline;
			overflow: hidden;				//溢出内容隐藏
			text-overflow: ellipsis;		//文本溢出部分用省略号表示
			display: -webkit-box;			//特别显示模式
			-webkit-line-clamp: 2;			//行数
			line-clamp: 2;					
			-webkit-box-orient: vertical;	//盒子中内容竖直排列
	}

	.proItems_price {
		position: absolute;
		left: 28rpx;
		bottom: 16rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #F74600;
	}

	.proItems_savl {
		margin-left: 10rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18rpx;
		color: #BCC1CA;
	}

	.proItems_car {
		position: absolute;
		bottom: 17rpx;
		width: 43rpx;
		height: 41rpx;
		right: 17rpx;
	}

	.carshowview {
		width: 100%;
		height: 840rpx;
		overflow-y: auto;
		position: relative;

		.goods-header {
			width: 100%;
			position: relative;
			height: 233rpx;
			border-bottom: 1px solid #f3f3f3;
		}

		.goods-img {
			width: 178rpx;
			height: 178rpx;
			position: absolute;
			top: 21rpx;
			left: 21rpx;
		}

		.goods-price {
			position: absolute;
			top: 42rpx;
			left: 223rpx;
		}

		.lsj {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			line-height: 50rpx;
		}

		.price {
			font-family: Microsoft YaHei;
			font-weight: bold;
			font-size: 35rpx;
			color: #f76e00;
			padding-left: 20rpx;
		}

		.goods-kc {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			opacity: 0.7;
			position: absolute;
			top: 93rpx;
			left: 224rpx;
		}

		.goods-spgg {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;
			line-height: 44rpx;
			position: absolute;
			top: 140rpx;
			left: 224rpx;
		}

		.goods-sku {
			width: 100%;
			height: 375rpx;
			overflow-y: auto;
			border-bottom: 1px solid #f3f3f3;
			position: relative;
		}

		.skutitle {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #232323;

			padding-top: 24rpx;
			padding-left: 26rpx;
		}

		.skulist {
			padding-left: 26rpx;
			margin-top: 29rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-content: flex-start;
		}

		.skulistitem {
			min-width: 254rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 25rpx;
			color: #666666;
			cursor: pointer;
			border: 1px solid #f3f3f3;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
		}

		.skulight {
			border: 1px solid rgb(25, 189, 93);
		}
	}

	.numbox {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.numboxtitle {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;
	}

	.btns {
		width: 680rpx;
		height: 87rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFang;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		bottom: 15rpx;
	}

	.box-btn-card {
		height: 100%;
		width: 50%;
		background-color: rgb(245, 181, 64);
		line-height: 87rpx;
		text-align: center;
		border-radius: 40rpx 0 0 40rpx;
	}

	.box-btn-buy {
		height: 100%;
		width: 50%;
		background-color: rgb(103, 194, 66);
		line-height: 87rpx;
		text-align: center;
		border-radius: 0 40rpx 40rpx 0;
	}
</style>
